

<template>
  <div
    id="loading-moree"
    :style="domClass"
    v-if="reseted"
  >
    <!-- <slot></slot> -->
    <div class="loading" v-if="more">
      <a-icon type="redo" spin />
      <span class="mleft-10">努力加载中...</span>
    </div>
    <div class="no-loading mtop-10" v-else>
      <span style="color: rgba(0, 0, 0, 0.25)">{{ moreText }}</span>
    </div>
  </div>
</template>

<script>
// import { throttle } from '@/utils/optimize';

export default {
  name: 'LoadingMore',

  props: {
    // 设置防抖时间
    delayTime: {
      type: Number,
      default: 500
    },
    // 是否加载更多
    more: {
      type: Boolean,
      default: true
    },
    // 暂无更多
    moreText: {
      type: String,
      default: '- THE END -'
    },
    domClass: {
      type: Object,
      default: () => {}
    }
  },

  data() {
    return {
      reseted: true,
      observer: null,
      // spin: null
    };
  },
  
  mounted() {
    this.initMore();
  },

  beforeDestroy() {
    this.observer.disconnect();
    // this.spin = null;
    this.$nextTick(() => {
      this.reseted = false;
      this.$nextTick(() => {
        this.reseted = true;
        this.initMore();
      });
    })
  },

  methods: {
    initMore() {
      this.$nextTick(() => {
        // 被监听的对象,且必须唯一不然会被影响
        // this.spin = document.querySelector(this.domClass);
        const callback = entries => {
          // console.log(entries, this.$el);
          const E = entries[0];
          if (!this.more) {
            // 停止观察
            this.observer.disconnect();
            return;
          }
          if (E.isIntersecting || E.intersectionRatio > 0.01) {
            // 抛出钩子函数,触发一次就添加一定量的数据进行渲染
            this.$emit('scrollMore');
          }
        }
        const options = {
          root: null,
          rootMargin: '10px 0px',
          threshold: 1.0, // [0]
          trackVisibility: true,
          delay: this.delayTime
        }
        this.observer = new IntersectionObserver(callback, options);
        this.observer.observe(this.$el);
      })
    },
  },

  // render(h) {
  //   let moreType = null;
  //   if (this.more) {
  //     moreType = h('div', {
  //       staticClass: 'loading'
  //     }, [
  //       h('a-icon', {
  //         // slot: 'indicator',
  //         props: {
  //           // type: 'loading'
  //           type: 'redo',
  //           spin: true
  //         }
  //       }),
  //       h('span', {
  //         staticClass: 'mleft-10',
  //         domProps: {
  //           innerHTML: '努力加载中...'
  //         }
  //       })
  //     ]
  //   )
  //   } else {
  //     moreType = h('div', {
  //       staticClass: 'no-loading mtop-10'
  //     }, [
  //       h('span', {
  //         style: {
  //           color: 'rgba(0, 0, 0, 0.25)'
  //         },
  //         domProps: {
  //           innerHTML: this.moreText
  //         }
  //       })
  //     ])
  //   }
  //   return h('div', {
  //     attrs: {
  //       id: 'loading-more'
  //     }
  //   }, [moreType])
  // }
};
</script>

<style lang="less" scoped>
#loading-moree{
  position: relative;
  .loading, .no-loading {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}
// #loading-more {
//   position: relative;
//   // width: 100%;
//   // height: 100%;
//   // max-height: 700px;
//   // min-height: 150px;
// }
// .loader {
//   position: absolute;
//   top: calc(50% - 1.25em);
//   left: calc(50% - 1.25em);
//   width: 2.5em;
//   height: 2.5em;
//   transform: rotate(165deg);

//   &::before, &::after {
//     content: '';
//     position: absolute;
//     top: 50%;
//     left: 50%;
//     display: block;
//     width: 0.5em;
//     height: 0.5em;
//     border-radius: 0.25em;
//     transform: translate(-50%, -50%);
//   }

//   &::before {
//     animation: before-ani 2s infinite;
//   }

//   &::after {
//     animation: after-ani 2s infinite;
//   }
// }

// @keyframes before-ani {
//   0% {
//     width: 0.5em;
//     box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
//   }
//   35% {
//     width: 2.5em;
//     box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
//   }
//   70% {
//     width: 0.5em;
//     box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
//   }
//   100% {
//     box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
//   }
// }
// @keyframes after-ani {
//   0% {
//     height: 0.5em;
//     box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
//   }
//   35% {
//     height: 2.5em;
//     box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
//   }
//   70% {
//     height: 0.5em;
//     box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
//   }
//   100% {
//     box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
//   }
// }
// .hidden {
//   display: none;
// }
// .show {
//   display: block;
// }
</style>